<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			#box {
				display: flex;
				flex-wrap: wrap;
			}

			.target {
				margin: 5px;
				width: 200px;
				height: 200px;
				background-color: red;
			}

			.changYellow {
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script type="text/javascript">
			const $box = document.getElementById('box')
			const domList = new Array(1000).fill("<div class='target'></div>").join("")
			$box.innerHTML = domList

			const targets = document.querySelectorAll(".target")

			function getYellow(entries, observer) {
				entries.forEach(entry => {
					if (entry.isIntersecting) {
						entry.target.classList.add('changYellow')
					} else {
						entry.target.classList.remove('changYellow')
					}
				})
			}

			// threshold  可视比例
			const obsObj = new IntersectionObserver(getYellow, {
				threshold: 0.5
			})
			targets.forEach(v => {
				obsObj.observe(v)
			})
		</script>
	</body>
</html>